<template>
  <PageHeaderNew
    title="发送入职通知"
    :breadCrumb="['人事', '人事管理', '发送入职通知']"
    :showBack="true"
  ></PageHeaderNew>
  <a-divider />
  <a-form :model="data.data" style="padding: 0 20px">
    <a-row :gutter="24">
      <a-col :span="7">
        <a-form-item label="被通知员工：" required label-col-flex="100px">
          <a-input v-model="data.data.name" placeholder="请输入" />
        </a-form-item>
      </a-col>
      <a-col :span="7">
        <a-form-item label="手机号码：">
          <a-input v-model="data.data.phone" placeholder="请输入" />
        </a-form-item>
      </a-col>
      <a-col :span="7">
        <a-form-item label="个人邮箱：">
          <a-input v-model="data.data.email" placeholder="请输入" />
        </a-form-item>
      </a-col>
    </a-row>
    <a-form-item label="通知方式：" required label-col-flex="86px">
      <a-radio-group v-model="type">
        <a-radio :value="1">短信通知 </a-radio>
        <a-radio :value="2">邮件通知 </a-radio>
        <a-radio :value="3">短信邮件并行通知 </a-radio>
      </a-radio-group>
    </a-form-item>
  </a-form>

  <a-divider />
  <div v-show="type === 1 || type === 3">
    <div style="padding: 0 20px">
      <!-- <a-space>
        <p>当前企业短信额度：</p>
        <span class="color">0条 </span>
        <span class="color">购买短信？ </span>
        <span class="color">查看发送记录 </span>
      </a-space> -->
      <a-form :model="data" style="width: 70%">
        <a-form-item label="选择短信模板:" required label-col-flex="100px">
          <a-select
            @change="(e) => messageChange(e as number)"
            :options="messageSelect.data"
            :field-names="{ value: 'id', label: 'name' }"
            placeholder="请选择"
          >
          </a-select>
          <a-button
            type="primary"
            style="margin-left: 50px"
            @click="
              router.push({
                name: 'EntryProof'
              })
            "
            >新增短信模板</a-button
          >
        </a-form-item>
        <a-form-item label="短信内容：" label-col-flex="100px">
          <RichTextNew v-model:content="messageData" ref="rich"></RichTextNew>
        </a-form-item>
        <a-form-item label="短信签名：【领壹制造】"> </a-form-item>
        <a-form-item label="发送方式：" required label-col-flex="86px">
          <a-radio-group>
            <a-radio :value="1">直接发送 </a-radio>
            <a-radio :value="2">定时发送 </a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="发送时间：" label-col-flex="86px">
          <a-time-picker style="width: 194px" />
        </a-form-item>
      </a-form>
      <div>
        <p>温馨提示</p>
        <p class="content">
          1、因为短信内容发送,需要经过通讯公司内容审核故无法进行直接发送
        </p>
        <p class="content">
          2、短信内容审核通过后,系统会根据您所设置的短信发送时间定时发送
        </p>
        <p class="content">
          3、如您的短信审核被驳回,将会以短信形式告知您；会自动将您的短信余额返回您的账户
        </p>
        <p class="content">4、可在发送记录查看或撤回短信</p>
        <p class="content">
          5、如需申请企业专属短信签名,请点击查看：
          <span class="color">如何申请短信签名？</span>
        </p>
      </div>
    </div>
    <a-divider />
  </div>
  <div v-show="type === 2 || type === 3">
    <div style="padding: 0 20px">
      <a-form :model="data" style="width: 70%">
        <a-form-item label="选择邮件模板:" required label-col-flex="100px">
          <a-select
            @change="(e) => emailChange(e as number)"
            :options="emailSelect.data"
            :field-names="{ value: 'id', label: 'name' }"
            placeholder="请选择"
          >
          </a-select>
          <a-button
            type="primary"
            style="margin-left: 50px"
            @click="
              router.push({
                name: 'EntryProof'
              })
            "
            >新增邮件模板</a-button
          >
        </a-form-item>
        <a-form-item label="邮件内容：" label-col-flex="100px">
          <RichTextNew
            name="a"
            v-model:content="emailData"
            ref="rich"
          ></RichTextNew>
        </a-form-item>
        <a-form-item label="发送方式：" required label-col-flex="86px">
          <a-radio-group>
            <a-radio :value="1">直接发送 </a-radio>
            <a-radio :value="2">定时发送 </a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="发送时间：" label-col-flex="86px">
          <a-time-picker style="width: 194px" />
        </a-form-item>
        <a-form-item label="是否通知部门负责人：" label-col-flex="150px">
          <a-switch :checked-value="1" :unchecked-value="2" />
        </a-form-item>
        <a-form-item label="通知方式：" required label-col-flex="86px">
          <a-radio :value="1">系统通知 </a-radio>
        </a-form-item>
        <a-form-item label="被通知人员：" label-col-flex="86px">
          <a-input
            v-model="data.data.name"
            placeholder="请输入"
            style="width: 350px; margin-right: 10px"
          />
          <a-tooltip
            content="注:系统自动读取新入职员工的入职部门的部门负责人，如果员工入职时，并没有选择部门，或者该部门没有设置部门负责人，则该项为空，平常该项为关闭状态，需要通知的时候才打开"
          >
            <icon-exclamation-circle-fill class="color" size="20" />
          </a-tooltip>
        </a-form-item>
      </a-form>
    </div>
    <a-divider />
  </div>
  <div style="width: 100%; display: flex; justify-content: end">
    <a-button @click="router.back()">取消</a-button>
    <a-button type="primary" style="margin: 0 20px" @click="success"
      >成功</a-button
    >
  </div>
</template>
<script lang="ts" setup>
import {
  GetInform,
  GetOnboarding,
  GetonboardingById,
  GetBonboardingInform,
  GetInformByTemolateId,
  GetlistData,
  GetStaffDetails
} from '@/apis/management/personnel/baseSetting/TransactionSetting';
import { useRouter } from 'vue-router';
import { Message } from '@arco-design/web-vue';
const route = useRoute();
const router = useRouter();
const messageSelect = reactive({ data: [] });
const emailSelect = reactive({ data: [] });
const messageData: any = ref('');
const emailData: any = ref('');
const data: any = reactive({ data: {} });
const page = reactive({ page: 1, size: 10 });
const type = ref(1);
const userId = route.query.id as unknown as number;
const init = async () => {
  const staffDetails = await GetStaffDetails({ id: +userId });
  const onboardingInform1 = await GetBonboardingInform({ ...page, type: 1 });
  const onboardingInform2 = await GetBonboardingInform({ ...page, type: 2 });
  const listData = await GetlistData({});

  staffDetails.useTemplate?.collectionModel[0].controlModel.forEach(
    (element: any) => {
      const value = element.ctlValue.ctlValue;
      // 姓名
      if (element.ctlCode === 'C62B8DC31189847E0972B5D8F721404B1') {
        data.data.name = value;
      }
      // 手机
      if (element.ctlCode === 'C3384BE6E60C341D68B8180DA04A1C4E1') {
        data.data.phone = value;
      }
      // 邮箱
      if (element.ctlCode === 'CDA91C3B660FC46CBA7978E7031672229') {
        data.data.email = value;
      }
    }
  );
  messageSelect.data = onboardingInform1.content;
  emailSelect.data = onboardingInform2.content;
};
init();
const messageChange = async (nodeId: number) => {
  const res = await GetInformByTemolateId({ id: userId, nodeId });
  messageData.value = res.node;
};
const emailChange = async (emailId: number) => {
  const res = await GetInformByTemolateId({ emailId, id: userId });
  let text = res.email;
  res.stuffs?.forEach((ele: any, index: number) => {
    text += ele.stuffContent
      ? `<br/>${index + 1}. ${ele.stuffName}${'(' + ele.stuffContent + ')'}`
      : `<br/>${index + 1}. ${ele.stuffName}`;
  });
  emailData.value = text;
};
const success = () => {
  Message.success('发送成功');
  router.back();
};
</script>
<style scoped lang="less">
:deep(.w-e-text-container) {
  border-top: 1px solid #c9d8db !important ;
  width: 100%;
  z-index: 1 !important;
}
:deep(#richTextundefined) {
  width: 100%;
}
:deep(#richTexta) {
  width: 100%;
}
:deep(.w-e-toolbar) {
  display: none !important;
}
.content {
  padding: 0 50px;
}
.color {
  color: #3d7eff;
}
:deep(.arco-btn) {
  width: 100px;
}
</style>
